/**
 * 周次选择器组件
 */

'use client';

import React, { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { ChevronDown, X } from 'lucide-react';
import { useAnimation } from '@/hooks/useAnimation';
import { clsx } from 'clsx';

type AnimationState = 'entering' | 'entered' | 'exiting' | 'exited';

export interface WeekSelectorProps {
  /** 是否打开 */
  isOpen: boolean;
  /** 打开状态变化回调 */
  onOpenChange: (isOpen: boolean) => void;
  /** 当前周次 */
  currentWeek: number;
  /** 可选择的周次列表 */
  availableWeeks: number[];
  /** 周次变化回调 */
  onWeekChange: (week: number) => void;
  /** 自定义类名 */
  className?: string;
}


interface WeekSelectorModalProps {
  animationState: AnimationState;
  handleClose: () => void;
  handleWeekSelect: (week: number) => void;
  availableWeeks: number[];
  currentWeek: number;
}

const WeekSelectorModal: React.FC<WeekSelectorModalProps> = ({ 
  animationState, 
  handleClose, 
  handleWeekSelect, 
  availableWeeks, 
  currentWeek 
}) => (
  <>
    {/* 背景遮罩 */}
    <div
      className={clsx(
        'fixed inset-0 bg-black/20 z-40',
        `backdrop-${animationState}`
      )}
      onClick={handleClose}
    />

    {/* 弹窗内容 */}
    <div
      className={clsx(
        'fixed top-0 left-0 right-0 bg-white rounded-b-2xl shadow-2xl z-50 p-4',
        `menu-drawer-${animationState}`
      )}
    >
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-gray-800">选择周次</h3>
        <button onClick={handleClose} className="p-2 rounded-full hover:bg-gray-100">
          <X className="w-5 h-5 text-gray-600" />
        </button>
      </div>

      <div className="grid grid-cols-5 gap-3 max-h-[50vh] overflow-y-auto pb-4">
        {availableWeeks.map((week) => (
          <button
            key={week}
            onClick={() => handleWeekSelect(week)}
            className={clsx(
              'flex flex-col items-center justify-center aspect-square rounded-xl transition-all duration-200 transform active:scale-95',
              week === currentWeek
                ? 'bg-blue-500 text-white shadow-lg'
                : 'bg-gray-100 text-gray-700 hover:bg-blue-100'
            )}
          >
            <span className="text-sm">第</span>
            <span className="text-xl font-bold">{week}</span>
            <span className="text-sm">周</span>
          </button>
        ))}
      </div>
    </div>
  </>
);

export const WeekSelector: React.FC<WeekSelectorProps> = ({
  isOpen,
  onOpenChange,
  currentWeek,
  availableWeeks,
  onWeekChange,
  className,
}) => {
  const { shouldRender, animationState } = useAnimation(isOpen);

  const handleWeekSelect = (week: number) => {
    onWeekChange(week);
    onOpenChange(false);
  };

  const handleClose = () => {
    onOpenChange(false);
  };

  return (
    <div className={clsx('relative', className)}>
      {/* 触发按钮 */}
      <button
        className="flex items-center gap-1 px-3 py-1.5 bg-blue-500 backdrop-blur-sm rounded-full text-gray-700 font-medium transition-all shadow-md hover:bg-white active:scale-95"
        onClick={() => onOpenChange(true)}
      >
        <span>第 {currentWeek} 周</span>
        <ChevronDown className={clsx('w-4 h-4 transition-transform', isOpen && 'rotate-180')} />
      </button>

      {/* 弹窗 (Portal 渲染) */}
      {shouldRender && createPortal(
        <WeekSelectorModal 
          animationState={animationState} 
          handleClose={handleClose} 
          handleWeekSelect={handleWeekSelect} 
          availableWeeks={availableWeeks} 
          currentWeek={currentWeek} 
        />, 
        document.body
      )}
    </div>
  );
};
